<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>可穿戴传感个性化康复训练系统 – 主页面</title>
    <style>
        body{font-family:Arial,sans-serif;margin:0;padding:0;background:#f5f7fa;color:#333;}
        header{background:#2c3e50;color:#fff;padding:20px;text-align:center;}
        nav{display:flex;justify-content:center;background:#34495e;}
        nav a{color:#ecf0f1;padding:12px 20px;text-decoration:none;}
        nav a:hover{background:#1abc9c;}
        .container{max-width:1200px;margin:auto;padding:20px;}
        .card{background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);margin:20px 0;padding:20px;}
        .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
        .btn{background:#1abc9c;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;}
        .btn:hover{background:#16a085;}
        a.link{color:#1abc9c;text-decoration:none;}
        a.link:hover{text-decoration:underline;}
    </style>
</head>
<body>

<header>
    <h1>可穿戴传感个性化康复训练系统</h1>
    <p>医护‑患者‑家属三方闭环，提升康复效率与依从性</p>
</header>

<nav>
    <a href="#overview">系统概述</a>
    <a href="#features">功能特性</a>
    <a href="#demo">交互演示</a>
    <a href="#sleepData">APP睡眠数据</a>
    <a href="#diet">助眠药膳</a>
    <a href="#hospital">医院管理平台</a>
    <a href="11.html" class="link">医者端</a>          <!-- 改为“医者端” -->
    <a href="22.html" class="link">患者端</a>          <!-- 新增链接 -->
</nav>

<div class="container">

    <!-- 系统概述 -->
    <section id="overview" class="card">
        <h2>系统概述</h2>
        <p>系统分为 <strong>医护端</strong> 与 <strong>患者端</strong> 两大模块，分别实现 “数据监测、方案制定、过程管控、效果评估” 与 “简单操作、清晰指引、实时反馈、激励互动”。</p>
    </section>

    <!-- 功能特性 -->
    <section id="features" class="card">
        <h2>功能特性</h2>
        <div class="grid">
            <div class="card">
                <h3>医护端</h3>
                <p>患者管理、实时监测、方案制定、报告导出等完整功能。</p>
                <a class="link btn" href="doctor.html">打开医生端页面</a>
            </div>
            <div class="card">
                <h3>患者端</h3>
                <ul>
                    <li>首页极简导航、今日任务自动定位</li>
                    <li>训练指导（3D 动画 + 振动纠正）</li>
                    <li>实时数据查看（运动/生理）+ 状态符号标注</li>
                    <li>消息互动、成就体系、紧急求助</li>
                </ul>
            </div>
            <div class="card">
                <h3>系统特性</h3>
                <ul>
                    <li>BLE 5.0 低功耗（≤5 s 延迟，续航≥72 h）</li>
                    <li>边缘‑云协同计算（设备端即时纠正，云端深度分析）</li>
                    <li>AI 模型辅助评估（数据偏差报告、方案自适应调节）</li>
                    <li>多方交互闭环（医护‑患者‑家属）</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- 交互演示 -->
    <section id="demo" class="card">
        <h2>交互演示（模拟）</h2>
        <div class="grid">
            <div class="card"><button class="btn" id="startBtn">开始上肢伸展训练</button><p id="trainStatus">未开始</p></div>
            <div class="card"><button class="btn" id="dataBtn">查看实时心率/EMG</button><pre id="dataBox">-- 暂无数据 --</pre></div>
            <div class="card"><button class="btn" id="reportBtn">导出 PDF 报告</button><p id="reportStatus">未生成</p></div>
        </div>
    </section>

    <!-- APP 睡眠数据展示 -->
    <section id="sleepData" class="card">
        <h2>APP 睡眠数据展示</h2>
        <canvas id="sleepChart" width="800" height="300"></canvas>
        <p id="sleepStatus">加载中…</p>
    </section>

    <!-- 助眠药膳查询 -->
    <section id="diet" class="card">
        <h2>助眠药膳查询</h2>
        <input type="text" id="searchInput" placeholder="输入药材或菜名关键词">
        <div id="recipeList"></div>
        <div style="color:#c0392b;font-weight:bold;margin-top:10px;">
            <h4>⚠️ 药膳禁忌提示</h4>
            <p>本药膳仅供参考，使用前请在专业医师指导下进行。以下药物与本页面列出的药膳同服可能产生不良相互作用，请务必避免同用：</p>
            <ul>
                <li>镇静催眠类药物（如安定、苯二氮卓类）</li>
                <li>抗抑郁药（如氟西汀、舍曲林）</li>
                <li>抗组胺药（如扑尔敏、氯雷他定）</li>
                <li>抗凝血药（如华法林）</li>
                <li>其他已知与中药同服有禁忌的西药（请咨询医生）</li>
            </ul>
            <p>若出现头晕、心悸、血压异常等不适，请立即停用并就医。</p>
        </div>
    </section>

    <!-- AI 功能跳转至豆包 -->
    <section class="card" style="text-align:center;">
        <h2>AI 功能</h2>
        <p>想体验更强大的 AI 对话？点击下方按钮直接跳转至豆包 AI 平台。</p>
        <a href="https://www.doubao.com" target="_blank" class="btn">前往豆包 AI</a>
    </section>

    <!-- 医院管理平台（保留患者端功能） -->
    <section id="hospital" class="card">
        <h2>医院管理平台（患者端）</h2>
        <div class="grid">
            <div class="card">
                <h3>患者界面</h3>
                <div id="patientDetail" style="display:none;">
                    <p><strong>姓名：</strong><span id="detailName"></span></p>
                    <p><strong>年龄：</strong><span id="detailAge"></span></p>
                    <p><strong>性别：</strong><span id="detailGender"></span></p>
                    <p><strong>疾病描述：</strong><span id="detailDesc"></span></p>
                    <label>上传疾病相关图片</label>
                    <input type="file" id="imgUpload" accept="image/*">
                    <img id="imgPreview" class="img-preview" src="" alt="疾病图片预览">
                    <h4>睡眠数据可视化</h4>
                    <canvas id="patientSleepChart" width="700" height="250"></canvas>
                </div>
                <p id="noPatientSelected">请选择左侧患者查看详情。</p>
            </div>
        </div>
    </section>

</div>

<script>
/* ---------- 交互演示 ---------- */
document.getElementById('startBtn').addEventListener('click',()=>{
    const s=document.getElementById('trainStatus');
    s.textContent='训练进行中...';
    s.style.color='#e67e22';
    setTimeout(()=>{s.textContent='训练已完成 ✔';s.style.color='#27ae60';},5000);
});
document.getElementById('dataBtn').addEventListener('click',()=>{
    const box=document.getElementById('dataBox');
    box.textContent='正在获取实时数据...';
    setTimeout(()=>{
        const hr=(60+Math.random()*20).toFixed(0);
        const emg=(Math.random()*100).toFixed(1);
        box.textContent=`心率：${hr} bpm\nEMG：${emg} µV`;
    },1500);
});
document.getElementById('reportBtn').addEventListener('click',()=>{
    const r=document.getElementById('reportStatus');
    r.textContent='报告生成中...';
    setTimeout(()=>{r.textContent='报告已生成（PDF）✔';r.style.color='#27ae60';},2000);
});

/* ---------- 睡眠曲线 ---------- */
function drawSleepChart(id){
    const canvas=document.getElementById(id);
    const ctx=canvas.getContext('2d');
    const w=canvas.width, h=canvas.height;
    ctx.fillStyle='#f9f9f9';
    ctx.fillRect(0,0,w,h);
    ctx.strokeStyle='#bbb';
    ctx.beginPath();ctx.moveTo(40,h-30);ctx.lineTo(w-20,h-30);ctx.stroke();
    ctx.beginPath();ctx.moveTo(40,20);ctx.lineTo(40,h-30);ctx.stroke();
    const points=[];
    for(let i=0;i<=48;i++){
        const hour=i*0.5;
        const depth=Math.max(0,Math.sin((hour-22)/24*Math.PI*2)*80+20+(Math.random()*10-5));
        points.push({x:40+(w-60)*(hour/24), y:h-30-(h-50)*(depth/100)});
    }
    ctx.strokeStyle='#1abc9c';
    ctx.lineWidth=2;
    ctx.beginPath();
    points.forEach((p,i)=>{i===0?ctx.moveTo(p.x,p.y):ctx.lineTo(p.x,p.y);});
    ctx.stroke();
    ctx.fillStyle='#333';
    ctx.font='12px Arial';
    for(let hrt=0;hrt<=24;hrt+=4){
        const x=40+(w-60)*(hrt/24);
        ctx.fillText(hrt+'h',x-10,h-10);
        ctx.beginPath();ctx.moveTo(x,h-30);ctx.lineTo(x,h-25);ctx.stroke();
    }
}
drawSleepChart('sleepChart');

/* ---------- 药膳检索 ---------- */
const recipes = [
    {title:"酸枣仁粥",ingredients:"酸枣仁 15 g，小米 50 g，大枣 5 枚",method:"酸枣仁煎20 min，过滤后与小米、大枣同熬成粥。"},
    {title:"莲子茯苓糕",ingredients:"莲子 30 g，茯苓 20 g，米粉、蜂蜜适量",method:"莲子、茯苓蒸熟后与米粉、蜂蜜混合，蒸制成糕。"},
    {title:"芹菜叶枣仁佛手汤",ingredients:"芹菜叶 30 g，酸枣仁（炒）6 g，佛手 5 g",method:"酸枣仁、佛手布包浸泡30 min，文火煎15 min，加入芹菜叶再煮沸，加盐、香油调味。"},
    {title:"山楂桃仁陈皮饮",ingredients:"山楂 5 g，桃仁 2 g，陈皮 3 g，红糖适量",method:"山楂、桃仁煎10 min，加入陈皮浸5 min，过滤加红糖调味。"},
    {title:"枸杞山药粥",ingredients:"枸杞 10 g，山药 100 g，糯米适量",method:"山药切块与糯米、枸杞同煮至粥稠，加入少许白糖。"},
    {title:"茯苓炖鱼头",ingredients:"茯苓 10 g，鱼头 1 只，生姜适量",method:"茯苓、姜片与鱼头小火炖40 min，加盐调味。"},
    {title:"桂圆莲子煲猪肉",ingredients:"桂圆肉 20 g，莲子 15 g，猪瘦肉 150 g",method:"桂圆、莲子、猪肉同炖2 h，盐调味。"},
    {title:"酸枣仁粥（变体）",ingredients:"酸枣仁 15 g，粳米 50 g，柏子仁 5 g",method:"酸枣仁与粳米同煮，可加柏子仁提升宁心效果。"}
];
function renderRecipes(list){
    const container=document.getElementById('recipeList');
    container.innerHTML='';
    if(list.length===0){container.innerHTML='<p>未找到匹配的药膳。</p>';return;}
    list.forEach(r=>{
        const div=document.createElement('div');
        div.className='recipe';
        div.innerHTML=`<h4>${r.title}</h4>
            <p><strong>主要食材：</strong>${r.ingredients}</p>
            <p><strong>做法：</strong>${r.method}</p>`;
        container.appendChild(div);
    });
}
renderRecipes(recipes);
document.getElementById('searchInput').addEventListener('input',e=>{
    const kw=e.target.value.trim().toLowerCase();
    if(!kw){renderRecipes(recipes);return;}
    const filtered=recipes.filter(r=>r.title.toLowerCase().includes(kw)||r.ingredients.toLowerCase().includes(kw)||r.method.toLowerCase().includes(kw));
    renderRecipes(filtered);
});

/* ---------- 患者端（保留） ---------- */
document.getElementById('imgUpload')?.addEventListener('change',e=>{
    const file=e.target.files[0];
    if(file){
        const url=URL.createObjectURL(file);
        document.getElementById('imgPreview').src=url;
    }
});
</script>

</body>
</html>
